<template>
    <div class="page">
        <div class="content">
            <div class="user ">
                <div class="avatar">
                    <img :src="userInfo.avatar" alt="">
                </div>
                <div class="detail">
                    <div class="name">{{ userInfo.name }}</div>
                    <div class="phone">{{ userInfo.phone }}</div>
                </div>
                <i class="iconfont icon-shezhi" @click="toSetting"></i>
            </div>
            <div class="big container">
                <div class="jiuZhen">
                    <i class="iconfont icon-yuyue "></i>
                    <div class="wenzi">
                        <h4>就诊人管理</h4>

                    </div>
                </div>
                <div class="zhuYuan">
                    <i class="iconfont icon-zhifudingjin "></i>
                    <div class="wenzi">
                        <h4>住院人管理</h4>
                    </div>

                </div>
            </div>
            <div class="more container">
                <ul>
                    <li v-for="item in 6" :key="item" @click="goHome">
                        <i class="iconfont icon-yuyue one"></i>
                        <span>预约挂号记录</span>
                        <i class="iconfont icon-xiayibu two"></i>
                    </li>
                    <li @click="goLogin">
                        <i class="iconfont icon-yuyue one"></i>
                        <span>登录/注册</span>
                        <i class="iconfont icon-xiayibu two"></i>
                    </li>
                 
                </ul>
            </div>
        </div>

        <van-tabbar v-model="active" route>
            <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
            <van-tabbar-item icon="comment-o" to="/message">信息</van-tabbar-item>
            <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from "vue-router";
import { getUserInfoApi } from '@/api'

const active = ref(0);
const userInfo = ref([])
const router = useRouter()

 const getUserInfo = async () => {
     let { data } = await getUserInfoApi()
     userInfo.value = data[0]
 }
 getUserInfo()

// 测试跳转
const goHome=() =>{
    router.push('/home'); // 替换 `/path` 为你想要跳转的路由路径
}

const toSetting=()=>{
    router.push('/setting');
}
const goLogin=()=>{
    router.push('/login')
}
onMounted(()=>{
    console.log('onmunted');
})
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';

.content {
    width: 100%;
    height: calc(100% - 50px - 46px);
    position: fixed;
    top: 46px;
    bottom: 50px;
    background-color: rgb(201, 247, 242);
    display: flex;
    flex-direction: column;

    .user {
        display: flex;
        align-items: center;
        height: 80px;

        background: #f4d0d0;

        .avatar {
            width: 60px;
            height: 60px;
            margin: 0 10px;

            img {
                width: 100%;
                height: 100%;
                border-radius: 90px;
            }
        }

        .detail {
            flex: 1;
            height: 60px;
            background-color: aquamarine;
            display: flex;
            flex-direction: column;
            align-items: self-start;
            justify-content: space-evenly;
        }

        i {
            width: 50px;
            height: 50px;
            font-size: 140%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .big {
        border-radius: 10px;
        height: 80px;
        background-color: #aabd93;
        display: flex;
        align-items: center;

        &>div {
            flex: 1;
            height: 80%;
            background-color: bisque;
            display: flex;
            flex-direction: column;

            i {
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 180%;
            }

            .wenzi {
                height: 50%;
                background-color: beige;
                display: flex;
                align-items: center;
                justify-content: center;

                h4 {
                    color: $text-color;
                }
            }
        }
    }

    .more {
        flex: 1;

        ul {
            width: 100%;
            height: 100%;
            background-color: blueviolet;
            display: flex;
            flex-direction: column;

            li {
                flex: 1;
                border-bottom: 1px solid black;
                display: flex;
                align-items: center;

                .one,
                .two {
                    width: 20%;
                    height: 80%;
                    background-color: #aabd93;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .one {
                    font-size: 250%;
                }

                .two {
                    justify-content: flex-end;
                    font-size: 150%;
                }

                span {
                    flex: 1;
                    height: 80%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    background-color: #f4d0d0;
                    font-size: 20px;
                    color: $text-color;
                }
            }
        }
    }




}
</style>